<template>
  <div>
      <Button type="primary" @click="getUrl()">删除</Button>
      <Modal
          v-model="modal1"
          title="弹出窗"
          @on-ok="ok"
          @on-cancel="cancel">
          <p>你确定删除节点？</p>
      </Modal>

      <div class="wrap-dialog hide">
          <div class="dialog">
              <div class="dialog-header">
                  <span class="dialog-title">删除确认</span>
              </div>
              <div class="dialog-body">
                  <span class="dialog-message">你确认删除此条信息？</span>
              </div>
              <div class="dialog-footer">
                  <input type="button" class="btn" id="ok" value="确认" />
                  <input type="button" class="btn ml50" id="qx" value="取消" />
              </div>
          </div>
      </div>


      <div id="areaTree">
          <div class="tree-box">
              <div class="zTreeDemoBackground left">
                <!-- <div class="search-bar">
                  <Row>
                    <Input style="width: 200px" v-model="checkVal" size="large" placeholder="请输入..."></Input>
                    <div style="display: inline-block;">
                      <Button @click="myFilter()" type="primary" icon="search">搜索</Button>
                      <Button @click="freshArea()" type="ghost">重置</Button>
                    </div>
                  </Row>
                </div> -->
                <ul id="treeDemo" class="ztree"></ul>
              </div>
          </div>
      </div>
  </div> 
</template>

<script>
  // 下面的是单个Vue组件引用的外部静态文件，也可以在main.js文件中引用
// 引入ztree.js
//import "../../../plugins/ztree/js/jquery-1.4.4.min.js"
import axios from 'axios';
import "../../../plugins/ztree/js/jquery.ztree.core.min.js"  
import "../../../plugins/ztree/js/jquery.ztree.excheck.min.js"  
import "../../../plugins/ztree/js/jquery.ztree.exedit.js"
import "../../../plugins/ztree/js/jquery.ztree.exhide.js"
    export default {
      name: 'areaTree',
      components:{

      },
      data:function(){
        return{
            newCount:1,
            className: "dark",
            hiddenNodes: [],
            zTreeObj: "",
            checkVal: "",
            Inpvalue: "",
            modal1: false,
            isOk: false,
            setting:{
              view: {
                addHoverDom: this.addHoverDom,
                removeHoverDom: this.removeHoverDom,
                selectedMulti: false
              },
              edit: {
                enable: true,
                editNameSelectAll: true,
                showRemoveBtn: true,
                showRenameBtn: true
              },
              data: {
                simpleData: {
                  enable: true
                }
              },
              callback: {
                beforeDrag: this.beforeDrag,
                beforeEditName: this.beforeEditName,
                beforeRemove: this.beforeRemove,
                beforeRename: this.beforeRename,
                onRemove: this.onRemove,
                onRename: this.onRename
              }
            },
            
            zNodes:[
              { id:1,pid:0,name:"总部",open:true,nocheck:false,
                children: [
                    { id:11,pid:1,name:"总部"},
                    { id:12,pid:1,name:"华南大区",open:true,
                        children: [
                            { id:121,pid:12,name:"深圳分公司"},
                            { id:122,pid:12,name:"广州分公司"}
                        ]
                    },
                    { id:13,pid:1,name:"华东大区",open:true,
                        children: [
                            { id:131,pid:13,name:"上海分公司"},
                            { id:132,pid:13,name:"厦门分公司"}
                        ]
                    }
                ]
              }
            ]
            
        }
      },
      methods:{
        //弹出层
        handleRender () {
                this.$Modal.confirm({
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.Inpvalue,
                                autofocus: true,
                                placeholder: '输入....'
                            },
                            on: {
                                input: (val) => {
                                    this.Inpvalue = val;
                                }
                            }
                        })
                    }
                })
            },
        modal: function(){
          this.modal1 = true;
        },
        ok: function () {
            console.log("确定");
            this.isOk = true;
        },
        cancel: function() {
            console.log("取消");
            this.isOk = false;
        },
        getUrl: function(){
          console.log("0000")

        },
        //过滤ztree显示数据
         myFilter: function(){
          //显示上次搜索后背隐藏的结点
          this.zTreeObj.showNodes(this.hiddenNodes);

          //查找不符合条件的叶子节点
          function filterFunc(node){
            //var _keywords=$("#keyword").val();
            if(node.isParent||node.name.indexOf(this.checkVal)!=-1) return false;
            return true;    
          };

          //获取不符合条件的叶子结点
          this.hiddenNodes=this.zTreeObj.getNodesByFilter(filterFunc);
          
          //隐藏不符合条件的叶子结点
          this.zTreeObj.hideNodes(this.hiddenNodes);
        },
       

         beforeEditName: function(treeId, treeNode) {
           
            //showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);

            setTimeout(function() {

              if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？")) {
                setTimeout(function() {
                  zTree.editName(treeNode);
                }, 0); 
              }




            }, 0);
            return false;
          },
           beforeRemove: function(treeId, treeNode) {
            //showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);
            return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
          },
          onRemove: function(e, treeId, treeNode) {
            //showLog("[ "+getTime()+" onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
          },
          beforeRename: function(treeId, treeNode, newName, isCancel) {
           
            //showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
            if (newName.length == 0) {
              setTimeout(function() {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.cancelEditName();
                alert("节点名称不能为空.");
              }, 0);
              return false;
            }
            return true;
          },
          onRename: function(e, treeId, treeNode, isCancel) {
           // showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
           //this.handleRender();
           
        },
        
        addHoverDom: function (treeId, treeNode) {
          var sObj = $("#" + treeNode.tId + "_span");
          if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
          var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='添加' onfocus='this.blur();'></span>";
          sObj.after(addStr);
          var btn = $("#addBtn_"+treeNode.tId);
          if (btn) btn.bind("click", function(){
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.addNodes(treeNode, {id:(100 + this.newCount), pId:treeNode.id, name:"new node" + (this.newCount++)});
            return false;
          });
        },
        removeHoverDom: function (treeId, treeNode) {
          $("#addBtn_"+treeNode.tId).unbind().remove();
        },
        beforeDrag: function (treeId, treeNode) {
          return false;
        },
        freshArea: function(){
            $("#keyword").val("");
            $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
        },
        zTreeOnClick: function(event, treeId, treeNode) {
            console.log(treeNode.tId + ", " + treeNode.name);
        },
        setEdit: function() {
          var zTree = $.fn.zTree.getZTreeObj("treeDemo");

          zTree.setting.edit.removeTitle = "删除";
          zTree.setting.edit.renameTitle = "修改";
        }
    
      },
      mounted(){
        this.zTreeObj = $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
        $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes).expandAll(true);
        this.setEdit();
        }
    }
</script>
<style scoped>
            /*plugins/ztree/css/zTreeStyle/zTreeStyle.css*/
   
    /*@import '../../../plugins/ztree/css/demo.css';*/
    @import '../../../plugins/ztree/css/zTreeStyle/zTreeStyle.css';


.highlight_red {color:#A60000;}
.highlight_green {color:#A7F43D;}
li {list-style: circle;font-size: 14px;}
li.title {list-style: none;}
ul.list {margin-left: 17px;}
div.content_wrap {width: 600px;height:380px;}
div.content_wrap div.left{float: left;width: 250px;}
div.zTreeDemoBackground {width:100%;height:362px;text-align:left;}


    #areaTree{border:1px solid #e5e5e5;    margin-bottom: 2px;border-radius: 4px;overflow: hidden;}
    .box-title{border-radius: 3px 3px 0 0;background-color: #f5f5f5;}
    .box-title a{color: #2fa4e7;text-decoration: none;font-size:14px;display: block;padding: 8px 15px;cursor: pointer;}
    .box-title .fa{float:right;line-height: 20px;}

    .ztree li span.button.add {margin-left:2px;border: 1px solid red; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}

    .wrap-dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 16px;
        text-align: center;
        background-color: rgba(0, 0, 0, .4);
        z-index: 999;
    }
    .dialog {
        position: relative;
        margin: 15% auto;
        width: 300px;
        background-color: #FFFFFF;
    }
    .dialog .dialog-header {
        height: 20px;
        padding: 10px;
        background-color: lightskyblue;
    }
    .dialog .dialog-body {
        height: 30px;
        padding: 20px;
    }
    .dialog .dialog-footer {
        padding: 8px;
        background-color: whitesmoke;
    }
    .btn {
        width: 70px;
        padding: 2px;
    }
    .hide {
        display: none;
    }
    .ml50 {
        margin-left: 50px;
    }
</style>